<template>
  <div class="min-h-screen bg-gray-50 flex flex-col chat-container" :class="{'dark': isDarkMode}">
    <!-- 主体内容区 -->
    <div class="flex-1 max-w-7xl mx-auto px-6 flex">
      <!-- 左侧会话列表 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm mr-6 flex flex-col overflow-hidden main-msg h-screen">
        <div class="p-4 border-b dark:border-gray-700">
          <div class="relative">
            <el-input
              v-model="sessionName"
              @blur="getDialog"
              type="text"
              placeholder="搜索会话"
              suffix-icon="el-icon-search"
              class="dark:bg-gray-700 dark:border-gray-600 dark:text-white"
            />
          </div>
          <button @click="addHandle"
                  class="w-full mt-4 bg-blue-500 text-white py-2 rounded-lg !rounded-button whitespace-nowrap hover:bg-blue-600 transition-colors"
          >
            <i class="fas fa-plus mr-2"></i>新建会话
          </button>
        </div>
        <!-- 会话列表区域 -->
        <div class="flex-1 overflow-y-auto">
          <div
            v-for="(chat, index) in chatHistoryList"
            :key="index"
            :class="{ 'bg-blue-50 dark:bg-gray-700': chat.active }"
            class="p-4 border-b dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer flex items-start"
          >
            <div @click="getMsg(chat.id)" class="flex-1" style="width: 60%;">
              <h4 class="font-medium text-gray-800 dark:text-gray-200 truncate">
                <span
                  @dblclick="startEditing(chat.id)"
                  :contenteditable="chat.isEditing"
                  @blur="finishEditing(chat.id)"
                  @keydown.enter="finishEditing(chat.id)"
                  class="inline-block"
                  :ref="chat.id"
                >
                  {{ chat.title }}
                </span>
              </h4>
              <p class="text-sm text-gray-500 dark:text-gray-400 mt-1 truncate">{{ chat.lastMessage }}</p>
            </div>
            <div class="flex flex-col items-end ml-4" style="width: 20%; float: right;">
              <span class="text-xs text-gray-400 dark:text-gray-500">{{ chat.time }}</span>
              <div v-if="chat.unread" class="mt-1 px-2 py-0.5 bg-red-500 text-white text-xs rounded-full">
                {{ chat.unread }}
              </div>
              <div style="width: 20px; padding-top: 5px" @click="delHandle(chat.id)">
                <i class="el-icon-delete dark:text-gray-400"></i>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧聊天区域 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm flex flex-col overflow-hidden main-chat h-full"
           :style="{fontSize: fontSize + 'px'}">
        <!-- 顶部区域 -->
        <div class="p-4 border-b dark:border-gray-700 flex items-center justify-between" style="height: 10%;">
          <h2 class="text-lg font-medium text-gray-800 dark:text-gray-200">{{ this.assistantName }}</h2>
          <div class="flex items-center space-x-4">
            <!-- 主题切换按钮 -->
            <button
              @click="toggleTheme"
              class="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-full !rounded-button whitespace-nowrap"
              :title="isDarkMode ? '切换至亮色主题' : '切换至暗色主题'"
            >
              <i class="fas fa-palette text-gray-600 dark:text-gray-400"></i>
            </button>

            <!-- 设置按钮 -->
            <button
              @click="toggleSettings"
              class="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-full !rounded-button whitespace-nowrap"
              title="设置"
            >
              <i class="fas fa-cog text-gray-600 dark:text-gray-400"></i>
            </button>

            <!-- 帮助按钮 -->
            <button
              @click="showHelp"
              class="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-full !rounded-button whitespace-nowrap"
              title="帮助"
            >
              <i class="fas fa-question-circle text-gray-600 dark:text-gray-400"></i>
            </button>
          </div>
        </div>

        <!-- 设置面板 -->
        <transition name="fade">
          <div
            v-if="showSettingsPanel"
            class="absolute right-6 top-20 bg-white dark:bg-gray-800 shadow-lg rounded-lg p-4 z-10 w-64 border dark:border-gray-700"
            v-click-outside="closeSettings"
          >
            <h3 class="font-medium mb-3 dark:text-gray-200">设置</h3>
            <div class="space-y-3">
              <div>
                <label class="flex items-center dark:text-gray-300">
                  <input
                    type="checkbox"
                    v-model="autoScroll"
                    class="mr-2 rounded text-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600"
                  >
                  自动滚动到底部
                </label>
              </div>
              <div>
                <label class="flex items-center dark:text-gray-300">
                  <input
                    type="checkbox"
                    v-model="showThoughtProcess"
                    class="mr-2 rounded text-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600"
                  >
                  显示思考过程
                </label>
              </div>
              <div>
                <label class="block text-sm font-medium mb-1 dark:text-gray-300">消息字体大小</label>
                <select
                  v-model="fontSize"
                  class="w-full border rounded p-1 text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200"
                >
                  <option value="12">小 (12px)</option>
                  <option value="14">中 (14px)</option>
                  <option value="16">大 (16px)</option>
                </select>
              </div>
            </div>
          </div>
        </transition>

        <!-- 中间聊天内容区域 -->
        <div ref="chatContentRef" class="flex-1 overflow-y-auto p-4 chat-content">
          <div
            v-for="(message, messageIndex) in this.messageList"
            :key="messageIndex"
            class="mb-6 flex"
            :class="{ 'flex-row-reverse': message.role === 'user' }"
          >
            <div :class="{ 'ml-4': message.role === 'user', 'mr-4': message.role === 'assistant' }">
              <div class="w-10 h-10 rounded-full overflow-hidden">
                <img
                  src="@/assets/images/user.jpg"
                  v-if="message.role === 'user'"
                  class="w-full h-full object-cover"
                />
                <img
                  src="@/assets/images/user.png"
                  v-if="message.role === 'assistant'"
                  class="w-full h-full object-cover"
                />
              </div>
            </div>
            <div
              :class="{
                'bg-blue-500 text-white': message.role === 'user',
                'bg-gray-100 dark:bg-gray-700 dark:text-gray-200': message.role === 'assistant',
              }"
              class="max-w-[70%] rounded-lg p-4"
            >
              <div
                v-if="message.content.includes('<think>') && showThoughtProcess"
                class="mb-2 think-content dark:bg-gray-600 dark:border-gray-500"
              >
                <p v-html="extractThinkContent(message.content)" class="text-gray-500 dark:text-gray-300"></p>
              </div>
              <p v-html="extractAnswerContent(message.content)"></p>
            </div>
          </div>
          <div
            v-if="answerFlag == true"
            v-model="messageData"
            class="mb-6 flex"
            :class="{ 'flex-row-reverse': messageData.role === 'user' }"
          >
            <div :class="{ 'mr-4': messageData.role === 'assistant' }">
              <div class="w-10 h-10 rounded-full overflow-hidden">
                <img
                  src="@/assets/images/rob.png"
                  v-if="messageData.role === 'assistant'"
                  class="w-full h-full object-cover"
                />
              </div>
            </div>
            <div
              :class="{
                'bg-gray-100 dark:bg-gray-700 dark:text-gray-200': messageData.role === 'assistant',
              }"
              class="max-w-[70%] rounded-lg p-4"
            >
              <div
                v-if="messageData.content.includes('<think>') && showThoughtProcess"
                class="mb-2 think-content dark:bg-gray-600 dark:border-gray-500"
              >
                <p v-html="extractThinkContent(messageData.content)" class="text-gray-500 dark:text-gray-300"></p>
              </div>
              <p v-html="extractAnswerContent(messageData.content)"></p>
            </div>
          </div>
        </div>

        <!-- 底部输入区域 -->
        <div class="p-4 border-t dark:border-gray-700" style="height: 20%;">
          <!-- 图标区域 -->
          <div class="flex items-center space-x-4 mb-4">
<!--            <button-->
<!--              v-for="(tool, index) in tools"-->
<!--              :key="index"-->
<!--              class="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-full !rounded-button whitespace-nowrap"-->
<!--            >-->
<!--              <i :class="tool.icon" class="text-gray-600 dark:text-gray-400"></i>-->
<!--            </button>-->
          </div>
          <!-- 关键词区域 -->
          <div class="mb-4">
            <div class="flex flex-wrap gap-2">
              <span
                v-for="(tag, index) in keywords"
                :key="index"
                @click="handleSend(tag)"
                class="px-3 py-1 bg-gray-100 dark:bg-gray-700 text-sm text-gray-600 dark:text-gray-300 rounded-full cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
              >
                {{ tag }}
              </span>
            </div>
          </div>
          <div class="relative flex items-center">
            <!-- 左侧文本输入框 -->
            <textarea
              v-model="context"
              style="width: calc(100% - 90px);"
              rows="2"
              placeholder="请输入您的问题..."
              class="py-1 px-4 bg-gray-50 dark:bg-gray-700 rounded-lg resize-none text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 border-none dark:text-gray-200 dark:placeholder-gray-400"
            ></textarea>
            <!-- 右侧按钮组 -->
            <div class="ml-4 flex items-center space-x-4">
<!--              <button-->
<!--                class="p-2 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-full !rounded-button whitespace-nowrap"-->
<!--                :class="{ 'animate-pulse': isRecording }"-->
<!--              >-->
<!--                <i class="fas fa-microphone text-gray-600 dark:text-gray-400"></i>-->
<!--              </button>-->
              <el-button
                type="primary"
                @click="handleSend()"
                :disabled="waitFlag"
                class="dark:bg-blue-600 dark:hover:bg-blue-700"
              >
                <span class="el-icon-loading" v-if="waitFlag"></span>
                <span v-else>发送</span>
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  addSession, chatList,
  completionsLine,
  delSession,
  editSession,
  getDialogList,
  getMsgList,
  setToken
} from '@/api/rag/rag.js'

// 自定义指令，点击外部关闭设置面板
const clickOutside = {
  beforeMount(el, binding) {
    el.clickOutsideEvent = event => {
      if (!(el === event.target || el.contains(event.target))) {
        binding.value();
      }
    };
    document.addEventListener('click', el.clickOutsideEvent);
  },
  unmounted(el) {
    document.removeEventListener('click', el.clickOutsideEvent);
  }
};

export default {
  directives: {
    'click-outside': clickOutside
  },
  data() {

    return {
      // 新增的UI控制数据
      isDarkMode: false,
      assistantName: ' ',
      showSettingsPanel: false,
      autoScroll: true,
      showThoughtProcess: true,
      fontSize: '14',

      // 原有数据
      chatId: '',
      sessionId: '',
      sessionName: '',
      isRecording: false,
      answerFlag: false,
      keywords: [],
      count: 0,
      msg: '正在思考中……',
      context: "",
      dialogVisible: false,
      chatDetail: {
        stream: true,
        question: "",
        session_id: ''
      },
      waitFlag: false,
      answer: '',
      chatHistoryList: [],
      messageData: {
        content: '',
        role: '',
      },
      messageList: [],
      dialogMag: [],
      tools: [
        {icon: 'fas fa-smile'},
        {icon: 'fas fa-paperclip'},
        {icon: 'fas fa-image'},
        {icon: 'fas fa-file'}
      ],
      msgId: '',
      sessionDetail: {
        name: ''
      },
      delIds: {
        ids: []
      },
    };
  },
  methods: {

    async getChatDetail() {
      try {
        this.loading = true
        const res = await chatList(1, 10)
        const chat = res.data.find(item => item.id === this.chatId)
        this.assistantName=chat.name
        console.log("111",chat.name)
        console.log("111",this.assistantName)

        return this.assistantName
      } catch (error) {
        console.error('获取聊天助手详情失败:', error)
        this.$message.error('获取聊天助手详情失败')
      } finally {
        this.loading = false

      }
    },

    // 主题切换功能
    toggleTheme() {
      this.isDarkMode = !this.isDarkMode;
      localStorage.setItem('darkMode', this.isDarkMode);
      this.$message({
        message: `已切换至${this.isDarkMode ? '暗色' : '亮色'}主题`,
        type: 'success',
        customClass: this.isDarkMode ? 'dark-message' : ''
      });
    },

    // 设置面板控制
    toggleSettings() {
      this.showSettingsPanel = !this.showSettingsPanel;
    },

    closeSettings() {
      this.showSettingsPanel = false;
    },

    created() {
      this.getChatDetail()

    },

    // 帮助功能
    showHelp() {
      this.$alert(
        `<div class="dark:text-gray-300">
          <h3 class="font-medium mb-3">使用帮助</h3>
          <ul class="list-disc pl-5 space-y-2">
            <li><strong>新建会话</strong>：点击左侧"新建会话"按钮</li>
            <li><strong>编辑标题</strong>：双击会话标题进行编辑</li>
            <li><strong>删除会话</strong>：点击会话右侧的删除图标</li>
            <li><strong>快速提问</strong>：点击关键词可以快速发送问题</li>
            <li><strong>主题切换</strong>：点击调色板图标切换亮/暗色主题</li>
            <li><strong>设置选项</strong>：点击齿轮图标调整显示设置</li>
          </ul>
        </div>`,
        '帮助信息',
        {
          dangerouslyUseHTMLString: true,
          customClass: this.isDarkMode ? 'dark-message' : '',
          confirmButtonClass: this.isDarkMode ? 'dark-confirm-button' : ''
        }
      );
    },

    // 原有方法保持不变
    getSrc() {
      this.chatId = this.$route.query.chatId;

      if (this.chatId) {
        this.getDialog();
        this.getAssistantInfo();
      }
    },



    getDialog() {
      this.chatHistoryList = [];
      getDialogList(this.chatId).then((res) => {
        this.dialogMag = res.data;


        if (this.sessionName.trim() !== '') {
          this.dialogMag = this.dialogMag.filter(item =>
            item.name.toLowerCase().includes(this.sessionName.trim().toLowerCase())
          );
        }
        this.updateChatHistory();
      });

    },

    getMsg(sessionId) {
      this.waitFlag = false;
      this.messageData = {
        content: '',
        role: '',
      };
      this.messageList = [];
      this.chatHistoryList = this.chatHistoryList.map(chat => ({
        ...chat,
        active: chat.id === sessionId
      }));
      getMsgList(this.chatId, sessionId).then((res) => {
        this.messageList = res.data[0].messages;
        this.$nextTick(() => {
          if (this.autoScroll) {
            this.scrollToBottom();
          }
        });
      });
    },

    scrollToBottom() {
      const chatContentRef = this.$refs.chatContentRef;
      if (chatContentRef) {
        chatContentRef.scrollTop = chatContentRef.scrollHeight;
      }
    },

    addHandle() {
      this.sessionDetail.name = "新会话";
      addSession(this.chatId, this.sessionDetail).then(() => {
        this.getDialog();
      });
    },

    delHandle(sessionId) {
      this.$confirm('确定要删除此会话吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        customClass: this.isDarkMode ? 'dark-message' : ''
      }).then(() => {
        this.delIds.ids = [];
        this.delIds.ids.push(sessionId);
        delSession(this.chatId, this.delIds).then(() => {
          this.$message({
            message: '删除成功',
            type: 'success',
            customClass: this.isDarkMode ? 'dark-message' : ''
          });
          this.chatHistoryList = [];
          this.getDialog();
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
          customClass: this.isDarkMode ? 'dark-message' : ''
        });
      });
    },

    async handleSend(quTag) {
      if (quTag) {
        this.context = quTag;
      } else if (this.context === '') {
        this.$message({
          message: '请输入问题',
          type: 'warning',
          customClass: this.isDarkMode ? 'dark-message' : ''
        });
        return;
      }

      this.chatDetail.question = this.context;
      this.chatDetail.session_id = this.sessionId;
      this.waitFlag = true;
      this.answerFlag = true;

      this.messageList.push({
        content: this.chatDetail.question,
        role: 'user'
      });

      this.context = '';
      this.messageData = {
        content: this.msg,
        role: 'assistant'
      };

      const timeoutId = setTimeout(() => {
        if (this.waitFlag) {
          this.waitFlag = false;
        }
      }, 60000);

      try {
        await completionsLine(this.chatId, this.chatDetail, (chunk) => {
          if (chunk) {
            try {
              const jsonString = chunk.substring(chunk.indexOf('{'));
              const dataObject = JSON.parse(jsonString);
              if (dataObject && dataObject.data && dataObject.data.answer) {
                const answer = dataObject.data.answer;
                this.messageData.role = 'assistant';
                this.messageData.content = answer;
              }
            } catch (e) {
              console.error('解析 JSON 失败:', e);
            }
          }
        }, (error) => {
          console.error('请求失败:', error);
          clearTimeout(timeoutId);
          this.waitFlag = false;
          this.answerFlag = false;
          this.$message({
            message: '请求失败，请重试',
            type: 'error',
            customClass: this.isDarkMode ? 'dark-message' : ''
          });
        }, () => {
          console.log('流式传输完成');
          clearTimeout(timeoutId);
          this.getMsg(this.sessionId);
          this.waitFlag = false;
          this.answerFlag = false;
        });
      } catch (error) {
        console.error('请求失败:', error);
        clearTimeout(timeoutId);
        this.waitFlag = false;
        this.answerFlag = false;
      }
    },

    updateChatHistory() {
      this.dialogMag.forEach((item) => {
        const lastMessage = item.messages[item.messages.length - 1];
        const cleanLastMessage = this.cleanText(lastMessage.content);
        const chatHistory = {
          id: item.id,
          title: item.name,
          lastMessage: cleanLastMessage.trim().substring(0, 22) + '...',
          time: new Date(item.update_time).toLocaleTimeString(),
          unread: 0,
          active: false,
          isEditing: false
        };
        const existingChat = this.chatHistoryList.find(chat => chat.id === chatHistory.id);
        if (existingChat) {
          existingChat.lastMessage = chatHistory.lastMessage;
          existingChat.time = chatHistory.time;
        } else {
          this.chatHistoryList.push(chatHistory);
        }
      });
      if (this.chatHistoryList.length > 0) {
        this.sessionId = this.chatHistoryList[0].id;
      }
      this.getMsg(this.sessionId);
    },

    extractThinkContent(content) {
      const thinkMatch = content.match(/<think>([\s\S]*?)<\/think>/);
      return thinkMatch ? thinkMatch[1] : '';
    },

    extractAnswerContent(content) {
      let answerMatch = content.replace(/<think>([\s\S]*?)<\/think>/, '');
      answerMatch = answerMatch.replace(/##\d+\$\$/g, '');
      const escapedContent = answerMatch
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#039;');
      return this.formatAnswer(escapedContent);
    },

    formatAnswer(content) {
      let formattedContent = content.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
      formattedContent = formattedContent.replace(/^### (.*)$/gm, '<h3>$1</h3>');
      formattedContent = formattedContent.replace(/^## (.*)$/gm, '<h2>$1</h2>');
      formattedContent = formattedContent.replace(/^# (.*)$/gm, '<h1>$1</h1>');
      formattedContent = formattedContent.replace(/(\d+)\.\s/g, '</li><ol><li>');
      formattedContent = formattedContent.replace(/<\/li><ol><li>\d+<\/li><\/ol>/g, '</li></ol>');
      formattedContent = formattedContent.replace(/-\s/g, '</li><ul><li>');
      formattedContent = formattedContent.replace(/<\/li><ul><li>-<\/li><\/ul>/g, '</li></ul>');
      formattedContent = formattedContent.replace(/(<\/li>)?(<\/ul>)?(<\/ol>)?$/g, '');
      formattedContent += '</li></ul></ol>';
      formattedContent = formattedContent.split('\n').map(line => `<p>${line}</p>`).join('');
      formattedContent = formattedContent.replace(/<p><\/p>/g, '');
      return formattedContent;
    },

    startEditing(chatId) {
      this.$set(this.chatHistoryList, this.chatHistoryList.findIndex(chat => chat.id === chatId), {
        ...this.chatHistoryList.find(chat => chat.id === chatId),
        isEditing: true,
      });
    },

    finishEditing(sessionId) {
      const chat = this.chatHistoryList.find(chat => chat.id === sessionId);
      if (chat) {
        chat.isEditing = false;
        const newTitle = this.$refs[sessionId][0].innerText;
        chat.title = newTitle;
        this.sessionDetail.name = newTitle;
        setTimeout(() => {
          editSession(this.chatId, sessionId, this.sessionDetail).then(() => {
            this.getDialog();
            this.$message({
              message: '修改成功',
              type: 'success',
              customClass: this.isDarkMode ? 'dark-message' : ''
            });
          });
        }, 300);
      }
    },

    cleanText(text) {
      let withoutThink = text.replace(/<think>[\s\S]*?<\/think>/g, '');
      let withoutHtml = withoutThink.replace(/<[^>]*>/g, '');
      let withoutSpecialChars = withoutHtml.replace(/[#*]/g, '');
      return withoutSpecialChars;
    },
  },
  mounted() {
    // 从本地存储加载用户偏好
    this.isDarkMode = localStorage.getItem('darkMode') === 'true';
    this.autoScroll = localStorage.getItem('autoScroll') !== 'false';
    this.showThoughtProcess = localStorage.getItem('showThoughtProcess') !== 'false';
    this.fontSize = localStorage.getItem('fontSize') || '14';
    this.getChatDetail();
    this.getSrc();
    fetch('/keywords.json')
      .then(response => response.json())
      .then(data => {
        this.keywords = data;
      })
      .catch(error => {
        console.error('加载 keywords.json 失败:', error);
      });
  },
  watch: {
    autoScroll(newVal) {
      localStorage.setItem('autoScroll', newVal);
      if (newVal) {
        this.$nextTick(() => {
          this.scrollToBottom();
        });
      }
    },
    showThoughtProcess(newVal) {
      localStorage.setItem('showThoughtProcess', newVal);
    },
    fontSize(newVal) {
      localStorage.setItem('fontSize', newVal);
    }
  }
};
</script>

<style scoped>
/* 基础样式 */
.chat-content p {
  line-height: 1.8;
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

/* 暗色模式下的滚动条 */
.dark ::-webkit-scrollbar-thumb {
  background: #4b5563;
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: #6b7280;
}

.dark ::-webkit-scrollbar-track {
  background: #1f2937;
}

/* 布局样式 */
.max-w-7xl {
  width: 100%;
  max-width: none;
}

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.main-msg {
  width: 24%;
  height: 88vh;
  overflow-y: auto;
}

.main-chat {
  width: 74%;
  display: flex;
  flex-direction: column;
  height: 88vh;
}

.chat-content {
  overflow-y: auto;
  padding: 1rem;
}

/* 思考内容样式 */
.think-content {
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  padding: 0.5rem;
  border-radius: 0.375rem;
  margin-bottom: 0.5rem;
  color: #888;
}

.dark .think-content {
  background-color: #374151;
  border-color: #4b5563;
  color: #d1d5db;
}

/* 设置面板过渡动画 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.2s, transform 0.2s;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}
</style>

<style>
/* 全局暗色模式样式 */
.dark {
  --el-color-primary: #409EFF;
  --el-text-color-primary: #e5e7eb;
  --el-text-color-regular: #d1d5db;
  --el-bg-color: #1f2937;
  --el-border-color-light: #374151;
  --el-fill-color-light: #374151;
}

/* 暗色模式下的消息框样式 */
.dark-message {
  background-color: #1f2937 !important;
  border-color: #374151 !important;
  color: #e5e7eb !important;
}

.dark-confirm-button {
  background-color: #3b82f6 !important;
  border-color: #3b82f6 !important;
  color: white !important;
}

.dark-confirm-button:hover {
  background-color: #2563eb !important;
  border-color: #2563eb !important;
}

/* 暗色模式下的输入框 */
.dark .el-input__inner {
  background-color: #374151 !important;
  border-color: #4b5563 !important;
  color: #e5e7eb !important;
}

.dark .el-textarea__inner {
  background-color: #374151 !important;
  border-color: #4b5563 !important;
  color: #e5e7eb !important;
}

/* 暗色模式下的选择框 */
.dark .el-select-dropdown {
  background-color: #374151 !important;
  border-color: #4b5563 !important;
}

.dark .el-select-dropdown__item {
  color: #e5e7eb !important;
}

.dark .el-select-dropdown__item.hover {
  background-color: #4b5563 !important;
}


.dark .chat-content {
  background-color: #1f2937; /* 或其他暗色背景 */
}

.dark .main-chat {
  background-color: #1f2937;
  border-color: #374151;
}

.dark .el-message-box {
  background-color: #1f2937;
  border-color: #374151;
  color: #e5e7eb;
}

.dark .main-msg {
  background-color: #1f2937;
  border-color: #374151;
}

.dark .el-input__inner {
  background-color: #374151;
  border-color: #4b5563;
  color: #f3f4f6;
}

.dark .el-input__inner::placeholder {
  color: #9ca3af;
}
.dark {
  --border-color: #374151;
  background-color: #1f2937;
}

/* 覆盖所有边框颜色 */
.dark * {
  border-color: var(--border-color);
}

/* 特定元素边框覆盖 */
.dark .el-input__inner,
.dark .el-textarea__inner,
.dark .el-select__tags,
.dark .el-card,
.dark .el-dialog {
  border-color: var(--border-color) !important;
}

/* 滚动条样式 */
.dark ::-webkit-scrollbar-thumb {
  background-color: #4b5563;
}

</style>
